<template>
    <div class="WsyjPowerNeeds" id="WsyjPowerNeeds-LineBar" style="height: 100%">
        <!-- 应急力量日投入统计力量需求【折柱图】  -->
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator';
    import GVChartDataConvert from '@/util/GVChartDataConvert';
    import {chartServer} from '@/api/installServer';
    import publishObjectPath from '@/util/configRegistry';

    const districtCode = publishObjectPath.value.districtCode;

    @Component({
        // 组件名
        name: 'WsyjPowerNeeds',
        // 依赖那些组件
        components: {}
        // 其他待定
    })
    export default class WsyjPowerNeeds extends Vue {
        /* @Prop private name! = string
               private name = 'abc'
               @provide
               @model
               @Watch
               @Inject
               @Provide
               @Emit
               get function
               set function*/

        /*@Prop() */
        public data?: object;
        private gvChart?: any;

        // 生命周期顺序
        public mounted() {
            // 加载统计组件模板
            gv.config.ChartTemplate.load();

            // 表格挂载位置
            const dom = document.getElementById('WsyjPowerNeeds-LineBar');

            const url = '/resTeam/getResTeamTotalByDay';
            const that = this;
            chartServer
                .getConfig(url, {districtCode: districtCode})
                .then((result: any) => {
                    if (
                        result.data &&
                        result.status === 200 &&
                        result.data.code === 0 &&
                        result.data.data
                    ) {
                        const items: any[] = result.data.data.items;
                        items.forEach((item) => {
                            item.entrys.splice(1, 0, item.entrys[item.entrys.length - 1]);
                            item.entrys.splice(item.entrys.length - 1, 1);
                        })
                        that.data = {items: items};
                        const source = new gv.source.SimpleSource(
                            GVChartDataConvert.convert(that.data)
                        );
                        this.gvChart = new gv.chart.BasicBarChart(source, dom);
                        this.setStyle();
                        this.gvChart.render();
                    }
                });

            /*const data = this.getData();
                    const source = new gv.source.SimpleSource(data);
                    this.gvChart = new gv.chart.BasicBarChart(source, dom);
                    this.setStyle();
                    this.gvChart.render();*/
        }

        private setStyle() {
            this.gvChart.config('grid', {
                top: 25,
                right: 10
            });

            this.gvChart.config('xAxis', {
                axisLabel: {
                    rotate: 30,
                    color: '#ffffff'
                },
                splitLine: {show: false},
                axisLine: {
                    lineStyle: {
                        color: 'rgba(114,114,114,0.8)'
                    }
                }
            });

            this.gvChart.config('yAxis', {
                axisLabel: {
                    color: '#ffffff'
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(114,114,114,0.8)'
                    }
                },
                axisLine: {show: false},
                axisTick: {show: false}
            });

            this.gvChart.config('legend', {
                textStyle: {
                    color: '#ffffff'
                },
                itemGap: 6,
                itemWidth: 12,
                itemHeight: 8,
                top: 'bottom'
            });

            this.gvChart.config('series[0]', {
                barWidth: 18,
                itemStyle: {
                    borderColor: '#66ceef',
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {offset: 0, color: '#66ceef'},
                            {offset: 0.5, color: '#17657c'},
                            {offset: 1, color: 'transparent'}
                        ]
                    }
                }
            });
            this.gvChart.config('series[1]', {
                type: 'line',
                symbol: 'circle',
                itemStyle: {
                    borderWidth: 0,
                    color: 'rgba(60,133,195,1)'
                }
            });
            this.gvChart.config('series[2]', {
                type: 'line',
                symbol: 'circle',
                itemStyle: {
                    color: 'rgba(168, 92, 67,1)',
                    borderWidth: 0
                }
            });
            this.gvChart.config('series[3]', {
                type: 'line',
                symbol: 'circle',
                itemStyle: {
                    color: 'rgba(212, 224, 110,1)',
                    borderWidth: 0
                }
            });
        }

        // 构建GVChart的数据
        private getData() {
            this.data = this.data || {
                items: [
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月22日'},
                            {name: 'a', alias: '本地医疗力量', value: 3420},
                            {name: 'b', alias: '地方支援力量', value: 2560},
                            {name: 'c', alias: '部队支援力量', value: 1040},
                            {name: 'd', alias: '医疗力量需求', value: 2200}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月23日'},
                            {name: 'a', alias: '本地医疗力量', value: 3425},
                            {name: 'b', alias: '地方支援力量', value: 2780},
                            {name: 'c', alias: '部队支援力量', value: 1040},
                            {name: 'd', alias: '医疗力量需求', value: 2000}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月24日'},
                            {name: 'a', alias: '本地医疗力量', value: 3450},
                            {name: 'b', alias: '地方支援力量', value: 2830},
                            {name: 'c', alias: '部队支援力量', value: 1330},
                            {name: 'd', alias: '医疗力量需求', value: 1940}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月25日'},
                            {name: 'a', alias: '本地医疗力量', value: 3468},
                            {name: 'b', alias: '地方支援力量', value: 2850},
                            {name: 'c', alias: '部队支援力量', value: 1380},
                            {name: 'd', alias: '医疗力量需求', value: 1950}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月26日'},
                            {name: 'a', alias: '本地医疗力量', value: 3476},
                            {name: 'b', alias: '地方支援力量', value: 2920},
                            {name: 'c', alias: '部队支援力量', value: 1447},
                            {name: 'd', alias: '医疗力量需求', value: 2010}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月27日'},
                            {name: 'a', alias: '本地医疗力量', value: 3490},
                            {name: 'b', alias: '地方支援力量', value: 3010},
                            {name: 'c', alias: '部队支援力量', value: 1447},
                            {name: 'd', alias: '医疗力量需求', value: 1980}
                        ]
                    },
                    {
                        entrys: [
                            {name: 'x', alias: '日期', value: '1月28日'},
                            {name: 'a', alias: '本地医疗力量', value: 3483},
                            {name: 'b', alias: '地方支援力量', value: 3230},
                            {name: 'c', alias: '部队支援力量', value: 1520},
                            {name: 'd', alias: '医疗力量需求', value: 1802}
                        ]
                    }
                ]
            };
            return GVChartDataConvert.convert(this.data);
        }
    }
</script>

<style scoped>
    .WsyjPowerNeeds {
        height: 100%;
        width: 100%;
    }
</style>